const {createApp}=Vue

createApp({
    data(){
        return{
           heroList:[],
           keyword:'',//保存搜索框输入的关键字
           query:{
             key:'dingwei',
             value:0,
           }
        }
    },
    computed:{
    filterhero() {
      const { key, value } = this.query
      // 分成如下情况
      const keyword =this.keyword
    //   如果keyword有值,为关键字查询;否则为条件查询
    if(!keyword){
          if (key === 'zonghe') {
        // 过滤数组中, pay_type属性值 = 10 或者 11
        return this.heroList.filter((item) => item.pay_type === value)
      } else if (key === 'dingwei') {
        // value为0, 显示全部英雄
        if (value === 0) {
          return this.heroList
        } else {
          return this.heroList.filter(
            (item) => item.hero_type === value || item.hero_type2 === value
          )
        }
      }
    }else{
          const res = this.heroList.filter((item)=>item.cname.includes(keyword))
     const  res1 = _.cloneDeep(res)
      return res1.map((item)=>{
           item.cname = item.cname.replace(keyword, `<span style="color: red">${keyword}</span>`)
            return item
      })
        
        
        
    
    }
    
    },
  },
    
    methods:{
      changeType(key,value){
           this.query.key=key
           this.query.value=value
      },
       changeKeyword(event){
    //  保存搜索框输入的查询关键字
    this.keyword=event.target.value

    //重置条件查询
    this.query.key='dingwei'
    this.query.value=0
    }

    },
  async mounted(){
    // 发送http请求,获取数据,给herolist赋值
    const { data } = await axios.get('http://project.x-zd.net:3001/apis/herolist')
    console.log(data)
    this.heroList=data.data
    console.log( this.heroList)
    },
   
}).mount('#app')